<template>
  <view class="container">
    <view class="device-pump"  @click="handleList(1)">
      <text class="title">AIES一体式智能泵站</text>
      <view class="more">
        <img
         
          style="width: 100%; height: 100%"
          src="@/static/images/arrow-right.png"
          alt=""
        />
      </view>
    </view>
    <view class="device-gate"  @click="handleList(2)">
      <text class="title">FIG农田智能闸门</text>
      <view class="more">
        <img
         
          style="width: 100%; height: 100%"
          src="@/static/images/arrow-right.png"
          alt=""
        />
      </view>
    </view>
    <view class="device-valve"  @click="handleList(4)">
      <text class="title">FIV农田智能阀门</text>
      <view class="more">
        <img
         
          style="width: 100%; height: 100%"
          src="@/static/images/arrow-right.png"
          alt=""
        />
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
const handleList = (type: number) => {
  uni.navigateTo({
    url: `/pages/list/index?type=${type}`,
  });
};
</script>

<style lang="scss" scoped>
.container {
  padding: 0rpx 30rpx;
  height: 100vh;
  .device-pump,
  .device-gate,
  .device-valve {
    width: 690rpx;
    height: 230rpx;

    .title {
      font-size: 36rpx;
      color: #fff;
      font-weight: 600;
      margin-left: 40rpx;
      margin-top: 63rpx;
      display: inline-block;
    }
    .more {
      width: 32rpx;
      height: 32rpx;
      margin-top: 30rpx;
      margin-left: 40rpx;
    }
  }
  .device-pump {
    background: url("@/static/images/pump-device-bg.png") no-repeat;
    background-size: 100% 100%;
    margin-top: 256rpx;
  }
  .device-gate {
    background: url("@/static/images/gate-device-bg.png") no-repeat;
    background-size: 100% 100%;
    margin-top: 40rpx;
  }
  .device-valve {
    background: url("@/static/images/valve-device-bg.png") no-repeat;
    background-size: 100% 100%;
    margin-top: 40rpx;
  }
}
</style>
